
<template>
  <div>
    <SearchForm :search-list="searchList" :search-params="searchParams">
      <template #button>
        <el-popconfirm
            title="确认导出吗？"
        >
          <el-button type="danger" icon="el-icon-download" @click="onExport">导出</el-button>
        </el-popconfirm>
      </template>
    </SearchForm>
    <div class="table-layout">
      <el-card shadow="never">
        <div class="table-handle">
          <el-button type="primary" size="mini" icon="el-icon-refresh" @click="onSearch"></el-button>
        </div>
        <div class="table-box">
          <el-table
              size="large"
              stripe
              border
              v-loading="loading"
              max-height="420px"
              :data="tableData"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(255, 255, 255, 0.8)"
              @selection-change="onSelect"
          >
            <el-table-column fixed="left" type="selection"></el-table-column>
            <el-table-column min-width="220px" show-overflow-tooltip align="center" v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label">
              <template slot-scope="scope">
                <template v-if="item.type === 'select'">
                  <el-tag :type="item.tagType" v-if="item.isTag">{{ item.mapping[scope.row[item.prop]] }}</el-tag>
                  <span v-else>{{ item.mapping[scope.row[item.prop]] }}</span>
                </template>
                <span v-else>{{ scope.row[item.prop] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page-box">
          <el-pagination
              background
              :current-page="pageNo"
              :page-sizes="pageSizes"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalSize"
              @size-change="changePageSize"
              @current-change="changePageNo"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>

import crud from "@/mixins/crud";

export default {
  name: "index",
  mixins: [crud],
  data() {
    return {
      searchList: [
        {
          label: '订单时间',
          prop: 'orderTime',
          multiple: true,
          name: 'date',
          dateType: 'datetimerange',
        },
        {
          label: '平台订单号',
          prop: 'platformOrderNo',
          name: 'input',
        },
        // 账户
        {
          label: "账户",
          prop: "account",
          name: "input",
        },
        {
          label: "状态",
          prop: "status",
          name: "select",
          multiple: false,
          clearable: true,
          options:  [
            {
              label: "PENDING",
              value: 0
            },
            // SUCCESS、FAILED、REFUND、PART_SUC
            {
              label: "SUCCESS",
              value: 1
            },
            {
              label: "FAILED",
              value: 2
            },
            {
              label: "REFUND",
              value: 3
            },
            {
              label: "PART_SUC",
              value: 4
            }
          ]
        },
      ],
      searchParams: {
        // 账单时间
        billTime: []
      },
      columns: [
        // 平台订单号、订单金额、手续费、到账金额、汇率、银行（类型）、客户姓名、客户账户、申请时间、完成时间、状态
        { prop: 'merchantOrderNo', label: '商户订单号' },
        { prop: 'platformOrderNo', label: '平台订单号' },
        { prop: 'orderAmount', label: '订单金额' },
        { prop: 'expectAmount', label: '预期金额' },
        { prop: 'actualPay', label: '实际支付' },
        { prop: 'fee', label: '手续费' },
        { prop: 'bankType', label: '银行（类型）' },
        { prop: 'customerName', label: '客户姓名' },
        { prop: 'customerAccount', label: '客户账户' },
        { prop: 'customerEmail', label: '客户邮箱' },
      ],
      tableData: [
        // 测试数据
        {
          merchantOrderNo: '123456',
          platformOrderNo: '123456',
          orderAmount: '1000',
          expectAmount: '1000',
          actualPay: '1000',
          fee: '1000',
          bankType: '中国银行',
          customerName: '张三',
          customerAccount: '123456',
        }
      ]
    }
  },
  methods: {
    onExport() {
      // 创建导出
    },
  }
}
</script>

<style scoped lang="scss">

</style>
